<template>
    <div class="box box_mm">
        <div class="box_main">
            <div class="search_box">
                <div style="display: flex; height: 100%">
                    <div class="search_item">
                        <span style="width: 0.8rem">回收企业</span>
                        <el-select
                            v-model="search_name"
                            placeholder="请选择"
                            style="width: 2rem"
                            filterable
                            clearable
                            @change="search">
                            <el-option
                                v-for="(item, index) in companylist"
                                :key="index"
                                :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </div>
                    <div class="search_item">
                        <span style="width: 0.5rem">时间</span>
                        <el-date-picker
                            v-model="search_date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="YYYY-MM-DD" />
                    </div>
                </div>
                <div class="search_item">
                    <el-button
                        type="primary"
                        class="btn_bgcolor"
                        @click="search"
                        >搜索</el-button
                    >
                    <el-button type="info" @click="reset">重置</el-button>
                </div>
            </div>
            <div class="box_cont">
                <div class="btn_list">
                    <!-- <el-button class="mybtn btn_bgcolor" type="primary" @click="daochu">导出</el-button> -->
                </div>
                <div
                    class="mytabbox"
                    style="
                        height: 81vh;
                        padding-top: 10px;
                        box-sizing: border-box;
                    ">
                    <el-table
                        :data="tabledata"
                        border
                        :summary-method="getSummaries"
                        show-summary
                        height="75vh"
                        v-loading="loading"
                        style="width: 100%; margin-top: 20px">
                        <el-table-column prop="name" label="" width="150" />
                        <!-- 动态列，使用 v-for 创建多个列 -->
                        <el-table-column
                            v-for="(item, index) in tablename"
                            :key="index"
                            :label="item.name">
                            <template #default="scope">
                                <!-- 假设 list 是字符串数组，直接显示该项 -->
                                <!-- 如果 list 是对象数组，你可能需要显示 item.field -->
                                <span>{{
                                    scope.row.number[index].product_num
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="合计" fixed="right" width="120">
                            <template #default="scope">
                                <span>{{ getTotal(scope.row) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide } from "vue";
import Table from "@/components/Table.vue";
import { post } from "../../../api/request";
import { ElMessage, ElMessageBox } from "element-plus";

//搜索字段
let search_name = ref("");
const options = [
    {
        value: "Option1",
        label: "Option1",
    },
    {
        value: "Option2",
        label: "Option2",
    },
    {
        value: "Option3",
        label: "Option3",
    },
    {
        value: "Option4",
        label: "Option4",
    },
    {
        value: "Option5",
        label: "Option5",
    },
];

let search_date = ref([]);
//定义表格的数据
const tabledata = ref([]);
const loading = ref(true)

// 计算表格底部的合计行
const getSummaries = (param: any) => {
    const { columns, data } = param;
    const sums: any = [];
    let totalSum = 0;

    columns.forEach((column: any, colIndex: number) => {
        // 第一列设置为 "总计"
        if (colIndex === 0) {
            sums[colIndex] = "总计";
        } else if (colIndex === columns.length - 1) {
            // 最后一列设置为之前列的总和
            sums[colIndex] = totalSum.toFixed(2);
        } else {
            // 中间的列为每个项目的总和
            let sum = 0;
            data.forEach((row: any) => {
                const value = row.number[colIndex - 1]?.product_num;
                sum += parseFloat(value) || 0;
            });
            totalSum += sum; // 累加到总和中
            sums[colIndex] = sum.toFixed(2);
        }
    });

    return sums;
};
// 获取每行的合计值
const getTotal = (row: any) => {
    let total = 0;
    row.number.forEach((item: any) => {
        total += parseFloat(item.product_num);
    });
    return total.toFixed(2);
};
const mytable = ref({ currentp: 1 });

let companylist = ref([]);
// 在 onMounted 钩子中发送请求
onMounted(() => {
    post({
        url: "/api/enterprise/index",
        data: {
            p: 1, //当前页数
            size: 999, //每页显示数量
        },
    }).then((res: any) => {
        companylist.value = res.data.list;
    });
    getdata();
});

let tablename = ref([]);

const getdata = () => {
    loading.value = true
    post({
        url: "/api/data/hssjtj",
        data: {
            company_id: search_name.value, //搜索名称
            endtime: search_date.value ? search_date.value[1] : "", //时间
            addtime: search_date.value ? search_date.value[0] : "",
            p: mytable.value?.currentPage, //当前页数
            size: 999, //每页显示数量
        },
    }).then((res: any) => {
        loading.value = false
        tabledata.value = res.data.data;
        if (res.data.data.length > 0) {
            tablename.value = res.data.data[0].number;
        }
    }).catch((err: any) => {
        loading.value = false
    });
};
const search = () => {
    mytable.value.currentPage = 1;
    getdata();
};
const reset = () => {
    search_name.value = "";
    search_date.value = [];
    mytable.value.currentPage = 1;
    getdata();
};

provide("getdata", getdata);
</script>

<style lang="scss" scoped>
@import url("../index.scss");
:deep(.el-table__footer-wrapper tfoot td.el-table__cell) {
    color: #333;
    font-weight: bold;
}
:deep(.el-table-fixed-column--right) {
    color: #333 !important;
    font-weight: bold;
}
</style>
